<template>
  <a-card>
    <div class="card-title">{{ $route.meta.title }}</div>
    <div class="table-operator">
      <div class="row-item-tab clearfix">
        <div class="tab-list fl-l">
          当前父标签：
          <a-radio-group :defaultValue="typeIndex" @change="handleTypes">
            <a-radio-button v-for="(item, index) in types" :key="index" :value="index">{{item}}</a-radio-button>
          </a-radio-group>
        </div>
        
        <a-button
          v-if="$auth('/goods/create')"
          class="fl-l"
          type="primary"
          icon="plus"
          @click="handleCreate"
        >创建子标签</a-button>
      </div>
      
    </div>
    <a-table
      :columns="columns"
      :data-source="list"
      rowKey="id"
    >
      <span slot="status" slot-scope="status">
        {{status | statusFilter}}
      </span>
      <span slot="action" slot-scope="record">
        <a class="btn" v-action:edit @click="handleEdit(record)">编辑</a>
        <a class="btn" v-action:delete @click="handleDelete(record)">删除</a>
      </span>
    </a-table>

    <TagForm ref="TagForm" @handleSubmit="handleRefresh" />
  </a-card>
</template>

<script>
// 父标签数组
const statusArray = [
  {name: '店铺', value: 1},
  {name: '个人', value: 2}
]

import * as UserApi from '@/api/user'
import { TagForm } from './modules'
export default {
  components: {
    TagForm
  },
  data() {
    return {
      types: ['店铺', '个人'],
      typeIndex: 0,
      isLoading: false,
      columns: [
        {
          title: '标签ID',
          dataIndex: 'id',
          width: 100
        },
        {
          title: '父标签',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '标签名',
          dataIndex: 'name'
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          width: 220,
        },
      ],
      list: []
    }
  },
  filters: {
    statusFilter(code) {
      let str = ''
      statusArray.forEach(item => {
        if (code === item.value) {
          str = item.name
        }
      })
      return str
    }
  },
  methods: {
    handleTypes(e) {
      this.typeIndex = e.target.value
      this.getDataList()
    },
    getDataList() {
      this.isLoading = true
      UserApi.tagslist({
        status: this.typeIndex + 1
      })
        .then(res => {
          this.list = res.data.list.data
          this.isLoading = false
        })
    },
    handleRefresh() {
      this.getDataList()
    },
    handleCreate() {
      this.$refs.TagForm.add({})
    },
    handleEdit(item) {
      this.$refs.TagForm.handle(item)
    },
    handleDelete() {
      // this.$refs.TagForm.add()
    }
  },
  created() {
    this.getDataList()
  }
}
</script>

<style lang="less" scoped>
.ant-card-body {
  padding: 22px 29px 25px;
}
// 筛选tab
.tab-list {
  margin-right: 20px;
}
.btn {
  margin-right: 20px;
}
</style>